body,html{
  margin:0px;
  padding:0px;

}

.container{
  width:100%;
  height:calc( 100vh );
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #000;
}

.hide{
  display: none !important;
}

.ccc{
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-wrapper{
  position: relative;
  width:100%;
  height:calc( 100% - 36px );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.player-wrapper .tr-box{
  position: absolute;
  top:0px;
  right:0px;
  height:36px;
  background-color: rgba(0,0,0,0.3);
  z-index:111;
  display: flex;
}

.player-wrapper .tr-box .sp-btn{
  width:36px;
  height:36px;
  line-height:36px;
  text-align: center;
  color:#FFF;
  user-select: none;
  cursor: pointer;
}

#player{
  width:100%;
  height:100%;
  transform-origin: center center;
}

#player.shu{
  width:calc( 100vh - 36px );
  height:calc( ( 100vh - 36px ) / 16 * 9 );
}

.drag-layer{
  position: absolute;
  top:0px;
  left: 0px;
  width: 100%;
  height:100%;
  z-index:111;
  pointer-events: none;
}

.ctrl-box{
  background-color: #2D3339;
  flex-shrink: 0;
  width:100%;
  height:36px;
  display: flex;
  align-items: center;
  z-index:11;
}

.ctrl-box .sp-btn{
  width:50px;
  height:36px;
  font-size: 14px;
  color:#FFF;
  cursor:pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ctrl-box .sp-box{
  padding:0px 10px;
  height:36px;
  font-size: 14px;
  color:#FFF;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ctrl-box .sp-btn.del{
  text-decoration: line-through;
}

.l2{
  width:100px;
  flex-shrink: 0;
}

.l1{
  width:100%;
}

/* com */



.dropbox{
  position: absolute;
  top:0px;
  left: 0px;
  width:100%;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color:#F1F1F1;
  user-select: none;

}

.dropbox input[type="file"]{
  opacity: 0;
  position: absolute;
  width:100%;
  height:100%;
}

.dropbox.over{
  color:#FFF;
}


.process-wrapper{
  background-color: #000;
  height:36px;
  position: relative;
  cursor: move;
}

.process-wrapper .process{
  position: absolute;
  top:0px;
  left: 0px;
  height:36px;
  border-right:2px solid #FFF;
  background-color: rgba(93,173,226,0.5);
  pointer-events: none;
}